<template>
  <el-dialog :title="'人员分组配置导入'" :close-on-click-modal="false" :visible.sync="visible"
             @close="clearDataList()" width="1200px" top="8vh" append-to-body>
    <basic-container>
      <div class="flex justifyContentSpaceBetween mb5">
        <!--<div v-show="showExist" class="tabletext">数据状态管理</div>-->
        <div class="tablelink">
          <el-upload
            class="upload-demo"
            action="/admin/sys-file/upload"
            accept=".xls,.xlsx"
            :headers="headers"
            :before-upload="beforeFileUpload"
            :on-change="handleChange"
            :on-success="handleUploadSuccess"
            :show-file-list="false"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <!--:show-file-list="false" -->
            <!--<div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件</div>-->
          </el-upload>
        </div>
      </div>
      <div v-show="showExist">
        <el-row>
          <el-table :data="tableData"  v-loading="bLoading"  element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(250, 245, 245, 0.8)"
                    tooltip-effect="dark" height="500px" style="width: 100%"  border stripe>
            <el-table-column type="index" align="center" width="55" fixed></el-table-column>
            <!--            <el-table-column label="数据状态"  align="center" width="90" fixed>-->
            <!--              <template slot-scope="scope">-->
            <!--                <span v-if="scope.row.rySjzt === '错误'"><span style="color: red">{{scope.row.rySjzt}}</span></span>-->
            <!--                <span v-else>{{scope.row.rySjzt}}</span>-->
            <!--              </template>-->
            <!--            </el-table-column>-->
            <el-table-column label="数据检测" min-width="220" >
              <template slot-scope="scope"><span style="color: red">{{ scope.row.rySjjc }}</span></template>
            </el-table-column>
            <el-table-column label="人员编号" width="120" fixed>
              <template slot-scope="scope">{{ scope.row.ryCode }}</template>
            </el-table-column>
            <el-table-column prop="ryXm" label="姓名" width="100"  fixed></el-table-column>
            <el-table-column prop="config03" label="个人考核分级" min-width="140">
              <template slot-scope="scope" >
                <el-select :clearable="true" v-model="scope.row.config03" placeholder="请选择" class="xiaLa"
                           style="width:115px">
                  <el-option v-for="(item,index) in lxOptions" :key="index" :label="item.label" :value="item.label">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="config01" label="工时（工作量）奖励" min-width="180">
              <template slot-scope="scope" >
                <el-input-number style="width: 155px" v-model="scope.row.config01" :precision="2" :step="1"  :min="0" ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="config02" label="员工考核基础分" min-width="180">
              <template slot-scope="scope" >
                <el-input-number style="width: 155px" v-model="scope.row.config02" :precision="2" :step="1"  :min="0" ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="config04" label="员工月绩效考核分" min-width="180">
              <template slot-scope="scope" >
                <el-input-number style="width: 155px" v-model="scope.row.config04" :precision="2" :step="1"  :min="0" ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="config06" label="综合业绩分值" min-width="180">
              <template slot-scope="scope" >
                <el-input-number style="width: 155px" v-model="scope.row.config06" :precision="2" :step="1"  :min="0" ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="config08" label="个人绩效分数" min-width="180">
              <template slot-scope="scope" >
                <el-input-number style="width: 155px" v-model="scope.row.config08" :precision="2" :step="1"  :min="0" ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="config05" label="绩效年薪基数" min-width="180">
              <template slot-scope="scope" >
                <el-input-number style="width: 155px" v-model="scope.row.config05" :precision="2" :step="1"  :min="0" ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="config07" label="绩效奖金基数" min-width="180">
              <template slot-scope="scope" >
                <el-input-number style="width: 155px" v-model="scope.row.config07" :precision="2" :step="1"  :min="0" ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="config09" label="绩效分值指数" min-width="180">
              <template slot-scope="scope" >
                <el-input-number style="width: 155px" v-model="scope.row.config09" :precision="2" :step="1"  :min="0" ></el-input-number>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </div>
    </basic-container>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="btnConfirm" >确定导入</el-button>
      <el-button @click="clearDataList" type="primary" plain>关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import request from '@/router/axios'
import store from '@/store'
import {getJJRyxxbList,allocationRyxxbJcPzDr,ryxxByJjDeptId } from '@/api/jiangjin/jiangjinryxxb';

export default {
  name: "importAllocationS",
  data(){
    return{
      deptId: "",
      bLoading:false,
      visible:false,
      fileList:[],
      //页面展示数据
      tableData: [],
      headers: {
        Authorization: 'Bearer ' + store.getters.access_token
      },
      lxOptions: [{value: 'A', label: 'A'}, {value: 'B', label: 'B'},
        {value: 'C', label: 'C'}, {value: 'D', label: 'D'}],
      showExist:false,
      tableCompare:[],
      //备用对比
      dataListCompare:[],
    }
  },
  methods:{
    handleUploadSuccess(response, file, fileList) {
      ////console.log('3232323')  show-overflow-tooltip
      this.showExist = true;
      this.$message.closeAll()
      if (response.code !== 0) {
        this.$message.error('上传出错：' + response.msg)
        return;
      }

      ////console.log(response.data.bucketName);//jxkh
      ////console.log(response.data.fileName);  //2021/07/27/09de9b8ed2e14996ba6b3a155d0a6884.xlsx
      this.bLoading = true;

      request({
        url: '/jiangjin/jiangjinryxxb/allocationFile/' + response.data.bucketName + '/' + response.data.fileName,
        method: 'get',
      }).then((res) => {
        this.tableImpExcel = [];
        this.tableImpExcel = res.data.data;
        console.log(JSON.stringify(this.tableImpExcel));

        this.setTableData();
        this.bLoading = false;

      }).catch(error =>{
        this.bLoading = false;
      })


    },
    setTableData(){
      this.tableData = [];
      let sStr = "A,B,C,D"

      // this.tableData = this.tableImpExcel;
      //去掉多余（分组之外用户额外添加）

      for(let i=0;i<this.dataListCompare.length;i++){
        for(let j=0;j<this.tableImpExcel.length;j++){
          if(this.dataListCompare[i]["ryCode"].toString().trim() ===
          this.tableImpExcel[j]["ryCode"].toString().trim()){
            this.tableData.push(this.tableImpExcel[j]);
            break;
          }
        }
      }

      for(let i in this.tableData){
        if(this.tableData[i]["config03"].toString().trim() !=="" &&
          sStr.indexOf(this.tableData[i]["config03"].toString().trim()) === -1 ){
          this.$set(this.tableData[i],"config03","");
        }
      }
    },
    handleChange(file, fileList){
      this.fileList = [];
      this.fileList.push(file);
    },
    beforeFileUpload(file){
      ////console.log(file);
      const cType = file.type;
      let isXls = false;

      // const isXls = file.type === 'xls/xlsx';
      if(cType === "application/vnd.ms-excel" ||
        cType === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"){
        isXls = true;
      }
      this.$message.closeAll()
      if (!isXls) {
        this.$message.error('导入文件只能是 Excel 格式!');
      }
      return isXls;
    },
    init (id) {
      this.visible = true;
      this.tableCompare = [];
      this.deptId = id;

      ryxxByJjDeptId(this.deptId).then(res=>{
        ////console.log(res.data);
        this.dataListCompare = [];
        this.dataListCompare = res.data;
        //console.log(JSON.stringify(this.dataListCompare));
      })

      getJJRyxxbList().then(res =>{
        this.tableCompare = res.data.data;
        ////console.log(this.tableCompare);
      })

    },
    getRepeatRyCode(ryCode){
      let lResult = "系统中查无此人，无法配置";
      this.tableCompare.find(u =>{
        if(u.ryCode == ryCode.toString().trim()){
          lResult = "";
        }
      })
      return lResult;
    },

    getErrName(vm,state){
      let lResult = "";

      if(state === "colume"){
        if(vm === 3){
          lResult = "config01";
        }else if(vm === 4){
          lResult = "config02";
        }else if(vm === 5){
          lResult = "config04";
        }else if(vm === 6){
          lResult = "config06";
        }else if(vm === 7){
          lResult = "config08";
        }else if(vm === 8){
          lResult = "config05";
        }else if(vm === 9){
          lResult = "config07";
        }else if(vm === 10){
          lResult = "config09";
        }
      }else { //取名字
        if(vm === 3){
          lResult = "工时(工作量)奖励";
        }else if(vm === 4){
          lResult = "员工考核基础分";
        }else if(vm === 5){
          lResult = "员工月绩效考核分";
        }else if(vm === 6){
          lResult = "综合业绩分值";
        }else if(vm === 7){
          lResult = "个人绩效分数";
        }else if(vm === 8){
          lResult = "绩效年薪基数";
        }else if(vm === 9){
          lResult = "绩效奖金基数";
        }else if(vm === 10){
          lResult = "绩效分值指数";
        }
      }

      return lResult;
    },

    getValidate(){
      let lResult = "";
      let lTemp = "";
      
      for(let i =0;i< this.tableData.length; i++){
        this.$set(this.tableData[i],"rySjjc","")
        lTemp = "";
        lTemp = this.getRepeatRyCode(this.tableData[i]["ryCode"]);

        if(lTemp !== ""){

          this.$set(this.tableData[i],"rySjjc",lTemp);
          
          lResult = "err";
          continue;
        }

        if(this.tableData[i]["config03"] === "" ||
          this.tableData[i]["config03"] === null){
          this.$set(this.tableData[i],"rySjjc","个人考核分级为空！");
         
          lResult = "err";
          continue;
        }

        for(let j=3;j<=10;j++){
          if(this.tableData[i][this.getErrName(j,"colume")] === 0 ||
            this.tableData[i][this.getErrName(j,"colume")] === undefined){
            this.$set(this.tableData[i],"rySjjc",this.getErrName(j,"name")+"未设置！");
           
            lResult = "err";
            break;
          }
        }

      }

      return lResult;
    },
    //确定
    btnConfirm(){
      let lMessage = "确定导入覆盖";
      let lErr = "";

      if(this.tableData.length === 0){
        this.$notify.closeAll();
        this.$notify.error('无可操作项！');
        return;
      }

      lErr = this.getValidate();
     
      if(lErr !== ""){
        return;
      }

      ////console.log(this.tableData);

      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      this.$confirm(lMessage, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        allocationRyxxbJcPzDr(this.tableData).then(res =>{
          this.$notify.closeAll();
          this.$notify.success('数据操作成功');
          loading.close();
          this.clearDataList();
          this.$emit("refreshDataList");
        }).catch((err) => {
          loading.close();
          this.$notify.closeAll();
          this.$notify.success('数据操作失败');
        });

      }).catch((err) => {
        loading.close();
      });


    },
    // 清空
    clearDataList(){
      this.visible = false;
      this.showExist = false;
      this.fileList = [];
    }
  }
}
</script>

<style scoped>

</style>
